/* 基础部分 */
*{
  padding: 0;
  margin: 0;
}
input,select,textarea{outline: none;}
a{text-decoration: none;}
li{list-style: none;}
*::-webkit-scrollbar{
  height: 0;
  width: 0;
}
table{border-collapse: collapse;}
html,body{height: 100%;}

/* 主要部分 */
.root-phone{
  display: grid;
  grid-template-columns:  auto auto auto auto auto auto;
  grid-template-rows: auto auto auto;
  height: 95%;
  width: 90%;
  margin: 0 auto;
  margin-top: 5%;
  grid-gap: 2vh;
}

.root-phone .primaryOne{
  grid-column: 1/span 4;
  grid-row: 1/span 2;
  background-color: red;
}

.root-phone .primaryTwo{
  grid-column: 5/span 2;
  grid-row: 1/span 1;
  background-color: aquamarine;
}

.root-phone .primaryThree{
  grid-column: 1/span 2;
  grid-row: 3/span 1;
  background-color: aqua;
}

.root-phone .primaryFive{
  grid-column: 3/span 2;
  grid-row: 3/span 1;
  background-color: orange;
}

.root-phone .primaryFour{
  background-color: blueviolet;
  grid-column: 5/span 2;
  grid-row: 2/span 2;
}

.root-computer{
  display: grid;
  grid-template-columns:  auto auto auto auto auto auto auto auto aotu;
  grid-template-rows: auto auto auto auto auto;
  height: 95%;
  width: 90%;
  margin: 0 auto;
  margin-top: 5%;
  grid-gap: 2vh;
}

.root-computer .primaryOne{
  grid-column: 1/span 4;
  grid-row: 1/span 2;
  background-color: red;
}

.root-computer .primaryTwo{
  grid-column: 5/span 2;
  grid-row: 1/span 1;
  background-color: aquamarine;
}

.root-computer .primaryThree{
  grid-column: 1/span 2;
  grid-row: 3/span 1;
  background-color: aqua;
}

.root-computer .primaryFive{
  grid-column: 3/span 2;
  grid-row: 3/span 1;
  background-color: orange;
}

.root-computer .primaryFour{
  background-color: blueviolet;
  grid-column: 5/span 2;
  grid-row: 2/span 2;
}